<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>
    <meta http-equiv="cache-control" content="no-cache">
    <link rel="stylesheet" type="text/css" href="css/maintable.css" >

    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
    <script>
        $(function (){
            $(".bigName").each(function() {
                var $this = $(this);
                var bigId = $this.data("id");
                $.ajax({
                    url: "GoodsServlet",
                    data: {flag: "searchCateBigName", bigId: bigId},
                    success: function (data) {
                        $this.html(data);
                    }
                });
            });

            $(".smallName").each(function() {
                var $this = $(this);
                var smallId = $this.data("id");
                $.ajax({
                    url: "GoodsServlet",
                    data: {flag: "searchCateSmallName", smallId: smallId},
                    success: function (data) {
                        $this.html(data);
                    }
                });
            });

            $(".a_img").mouseover(function(e){
                var $divImg = $(this).next('.div_img'); // 找到紧接着的.div_img元素
                $divImg.fadeIn(500);
                $divImg.css("position", "absolute");
                $divImg.css("left", e.pageX); // 注意这里使用pageX而不是clientX，因为它考虑了滚动偏移
                $divImg.css("top", e.pageY); // 同上，使用pageY

            }).mouseout(function(){
                $(this).next('.div_img').fadeOut(); // 隐藏对应的.div_img元素
            })
            // 全选按钮联动
            $("#ch_checkall,#top_ch_checkall").click(function (){
                $("input[name=ck_id]").attr("checked",this.checked);
            });
        });

        function show(pageIndex){
            window.location.href="GoodsServlet?flag=manager&pageIndex="+pageIndex;
        }

        function deleteChecked(){
            if($("input[name=ck_id]:checked").length==0){
                alert("请勾选至少一个！");
            }else{
                if(confirm("确认要删除吗？")){
                    document.form1.submit();
                }
            }
        }


    </script>

    <style>
        .div_img {
            width: 130px;
            height: 180px;
            background-color: lightgray; /* 使用背景色作为图片加载前的占位符 */
            position: relative; /* 使子元素可以相对于这个容器定位 */
            overflow: hidden; /* 隐藏超出容器的图片部分 */
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 4px; /* 添加圆角 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            padding: 5px; /* 内边距，使图片不会紧贴边框 */
            text-align: center; /* 文本和图片居中 */
        }
        .preview {
            width: 100%; /* 图片宽度设置为容器宽度的100% */
            height: 100%; /* 图片高度设置为容器高度的100% */
            object-fit: cover; /* 保持图片的宽高比，同时填充整个元素的内容框 */
            display: block; /* 消除图片底部的间隙 */
            margin: auto; /* 水平和垂直居中（与 text-align: center 配合使用）*/
        }
        /* 可选：添加加载指示器或占位符图片 */
        .preview {
            /* 这里可以添加加载指示器的样式，或者使用一个占位符图片 */
            /*background: url('http://localhost:8080/images/addPic.jpg') no-repeat center center;*/
            background-size: cover;
            background-position: center center; /* 将背景图片水平和垂直居中 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            display: block; /* 消除元素底部的间隙 */
            margin: auto; /* 水平居中（但此处对背景图像无效，主要用于块级元素内容居中）*/
        }
    </style>

</head>

<body>
<div class ="div_title">
    <div class="div_titlename"> <img src="/images/san_jiao.gif" ><span>商品维护</span></div>
    <div class="div_titleoper">
        <input type="checkbox" id="top_ch_checkall"/> 全选 <a href="/goods/goods_add.jsp"> <img src="/images/add.gif"/>添加 </a> <a href="javascript:deleteChecked()"><img src="/images/del.gif"/>删除</a> </div>
</div>

    <form action="GoodsServlet"  name="form1">
        <input name="flag" value="deleteChecked" type="hidden">

        <table class="main_table" >
            <tr>
                <th><input type="checkbox" id="ch_checkall" /></th>	<th>商品名</th> 	<th>大分类</th>	<th>小分类</th>  <th>描述</th>  <th>价格</th>  <th>单位</th>  <th>厂商</th>  <th>最后修改日期</th> 	<th>操作</th>
            </tr>
            <c:forEach items="${goodsList}" var="g">
                <tr>
                    <td>
                        <input type="checkbox" name="ck_id" value="${g.id}" id="id"/>
                    </td>
                    <td>${g.goodsName}</td>
                    <td class="bigName" data-id="${g.bigCateId}">
                    </td>
                    <td class="smallName" data-id="${g.smallCateId}">
                    </td>
                    <td> <a title="${g.des}">${g.shortDes}</a> </td>
                    <td>${g.price}</td>
                    <td>${g.unit}</td>
                    <td>${g.producter}</td>
                    <td>
                        <fmt:timeZone value="GMT">
                            <fmt:formatDate value="${g.editDate}" pattern="yyyy-MM-dd HH:mm"/>
                        </fmt:timeZone>
                    </td>
                    <td>
                        <a href="javascript:void(0)" class="a_img">查看图片</a>
                        <div class="div_img" style="display: none">
                            <img src="GoodsServlet?flag=showPic&goodsId=${g.id}" class="preview" onerror="this.onerror=null; this.src='http://localhost:8080/images/addPic.jpg';">
                        </div>
                        <a href="GoodsServlet?flag=update&goodsId=${g.id}">修改</a>
                        <a href="javascript:void(0)" data-id="${a.id}" class="delete">删除</a>
                        <a href="GoodsServlet?flag=seeHistory&goodsId=${g.id}">查看历史</a>
                    </td>
                </tr>

            </c:forEach>
        </table>
    </form>

    <div class="div_page" >
        <div class="div_page_left">    共有 <label>${page.rowCount}</label> 条记录，当前第 <label>${page.pageIndex}</label> 页，共 <label>${page.pageCount}</label> 页	</div>
        <div class="div_page_right" >

            <c:choose>
                <c:when test="${page.hasPre }">
                    <button onclick="show(1)"> 首页</button>
                    <button onclick="show(${page.pageIndex-1})"> 上一页</button>
                </c:when>
                <c:otherwise>
                    首页
                    上一页
                </c:otherwise>
            </c:choose>

            <c:choose>
                <c:when test="${page.hasNext }">
                    <button onclick="show(${page.pageIndex+1})">  下一页 </button>
                    <button onclick="show(${page.pageCount})"> 尾页</button>
                </c:when>
                <c:otherwise>
                    下一页
                    尾页
                </c:otherwise>
            </c:choose>


            <button onclick="show(document.getElementById('pageIndex').value)">转到</button>
            <input type="text" name="pageIndex" id="pageIndex" value="${page.pageIndex }" /> 页

        </div>

    </div>
</body>
</html>